<template>
  <div>
    <div style="marginTop:20px;marginLeft:100px;marginBottom:20px;textAlign:left">
    <el-button @click="addDia"  type="primary" plain  size="mini">
      新增
    </el-button>
    </div>
      <div style="display:flex;">
        <div style="width:15%">
          <!-- 树形结构 -->
          <el-tree
          :data="treeData"
          node-key="id"
          handleCheckChange
          @node-click="handleCheckChange"
          :props="defaultProps">
        </el-tree>
        </div>
      <div style="width:85%">
       <el-table
       border
     v-loading="loading"
    :data="newTableData"
     style="width: 90%">
    <el-table-column
      label="目录名"
      prop="catalogName"
      align="center"
      >
    </el-table-column>
    <el-table-column
      label="创建时间"
      prop="create_time"
      align="center"
      >
    </el-table-column>
    <el-table-column
      label="备注"
      prop="remark"
      align="center"
     >
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          type="warning"
          plain
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          plain
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
      <!-- 分页器
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1,2,3,4,5,10,15,20]"
          :page-size="catelogPage.pageSize"
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination> -->
       </div>
      </div>
      <!-- 修改添加分类弹窗 -->
    <el-dialog
     :title="title"
     :visible.sync="dialogVisible"
     width="30%"
     >
     <el-form  :rules="rules" ref="ruleForm"  :model="form" label-width="150px">
      <el-form-item label="目录名称" prop="catalogName">
      <el-input v-model="form.catalogName"></el-input>
     </el-form-item>
      <el-form-item label="父级目录" prop="parentId">
          <!-- <el-select v-model="form.parentId" placeholder="请选择父级目录">
          <el-option
            v-for="item in tableData"
            :key="item.id"
            :label="item.catalogName"
            :value="item.id">
          </el-option>
        </el-select> -->
          <el-cascader
          :options="treeData"
          :show-all-levels="false"
          :props="{ checkStrictly: true,label:'catalogName',children:'childrens',value:'id'}"
           @change="handleChange">
          </el-cascader>
     </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark"></el-input>
     </el-form-item>
     </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="determine">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import {catalogList,enewCategory,delCategory,reviseCategory,details} from '@/api/request/classify.js'
import {translateDataToTree} from '@/utils/removal'
export default {
   data(){
     return {
       total:0,
       defaultProps: {
          children: 'childrens',
          label: 'catalogName'
        },
       tableData:[],
       title:'',
       catelogPage:{
         catalogName:"",
         id:"",
         pageNum:1,
         pageSize:10,
    },
       loading:false,
       treeData:[],
       dialogVisible:false,
       form:{
         catalogName:"",
         parentId:1,
         sort:'1',
         remark:"",
         id:""
       },
       rules:{
          catalogName:[{ required: true, message: '输入目录名称', trigger: 'blur' }],
          parentId:[
               { required: true, message: '请选择父目录', trigger: 'change' },
          ]
       }
     }
   },
    computed:{
      newTableData(){
           if(this.tableData.length>0){
             return  this.tableData.map(item=>{
            let str=""
           str= `${item.create_time.slice(0,10)}  ${item.create_time.slice(11,19)}`
            item.create_time=str
            return item
          })

           }
      }
   },
   mounted(){
     this.getList()
     this.getTreeList()
   },
   methods:{
     handleChange(row){
       
         this.form.parentId=row[row.length-1]
       
     },
     handleSizeChange(val){
      
        this.catelogPage.pageSize=val
        this.list(this.catelogPage)
     },
     handleCurrentChange(val){
        this.catelogPage.pageNum=val
        this.list(this.catelogPage)
     },
    //  编辑
     handleEdit(index,row){
      
       this.title="修改"
       this.form.catalogName=row.catalogName
       this.form.parentId=row.parentId
       this.form.id=row.id
     
       this.dialogVisible=true
     },
    //  删除
     handleDelete(index,row){
        this.$confirm(
        '是否确认删除该分类?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
           delCategory(row.id).then(()=>{
          this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getList()
         this.getTreeList()
       },()=>{
          this.$message({
          message: '删除失败',
          type: 'error'
        });
       })
        })
        .catch(() => {});  
     },
     list(){
        catalogList(this.catelogPage).then(res=>{
      //  this.options=res.rows
     
          this.total=res.total
         this.tableData=res.rows
     },err=>{
      
     })
     },
    //  获取
     getList(){
       this.loading=true
       catalogList(this.catelogPage).then(res=>{
       this.loading=false
     
       this.tableData=res.rows
     },err=>{
       this.loading=false
      
     })
     },
     addDia(){
       this.title="新增"
       this.dialogVisible=true
       this.form.catalogName="",
       this.form.parentId="",
       this.form.remark=""
     },
    //  新增
     determine(){
       if(this.title==="新增"){
          this.$refs.ruleForm.validate((valid) => {
          if (valid) {
        
          enewCategory(this.form).then((res)=>{
         this.$message({
          message: '新增成功',
          type: 'success'
        });
         this.getList()
         this.getTreeList()
         this.dialogVisible=false
        }
        ,(err)=>{
          this.$message({
          message: '新增失败',
          type: 'error'
        });
        })
          } else {
           
            return false;
          }
        });
      ;
       }else{
        
           reviseCategory(this.form).then(res=>{
          
              this.$message({
                message: '修改成功',
                type: 'success'
              });
           this.getList()
            this.getTreeList()
           this.dialogVisible=false
           },(err)=>{
           
            this.$message({
            message: '修改失败',
            type: 'error'
          });
           })
      
       }
     },
       /** 查询商品分类列表 */
    getTreeList() {
     catalogList().then(res=>{
     
     
      this.total=res.total
      this.treeData=translateDataToTree(res.rows)
     
     },err=>{
      
     })
    },
     handleCheckChange(data, checked, indeterminate) {
     
        this.catelogPage.pageNum=1
        this.catelogPage.pageSize=10
         this.catelogPage.catalogName=data.catalogName
         if(data.childrens && data.childrens.length>0){
           this.tableData=data.childrens
         }else{
            this.tableData=[data]
         }
     },
   }
}
</script>

<style>

</style>